<template>
  <!-- 添加或修改公众号账号对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="公众号名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入公众号名称"/>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="公众号类型" prop="type">
            <el-select v-model="form.type" placeholder="公众号类型">
              <el-option v-for="(name,key) in ACCOUNT_TYPES" :key="name" :label="name" :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否认证" prop="verified">
            <el-switch v-model="form.verified" placeholder="是否认证"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="appid" prop="appid">
        <el-input v-model="form.appid" placeholder="请输入appid"></el-input>
      </el-form-item>
      <el-form-item label="appsecret" prop="secret">
        <el-input v-model="form.secret" placeholder="请输入appsecret"/>
      </el-form-item>
      <el-form-item label="token" prop="token">
        <el-input v-model="form.token" placeholder="请输入token"/>
      </el-form-item>
      <el-form-item label="aesKey" prop="aesKey">
        <el-input v-model="form.aesKey" placeholder="请输入aesKey"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { mapState } from 'vuex';
  import { getAccount, addAccount, updateAccount } from "@/api/wx/account";
  export default {
    name: "add-or-update",
    data() {
      return {
        // 按钮loading
        buttonLoading: false,
        handle: "",
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          appid: [
            {required: true, message: "appid不能为空", trigger: "blur"}
          ],
          name: [
            {required: true, message: "公众号名称不能为空", trigger: "blur"}
          ],
          secret: [
            {required: true, message: "appsecret不能为空", trigger: "blur"}
          ]
        }
      };
    },
    computed: mapState({
      ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES
    }),
    methods: {
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          appid: undefined,
          name: undefined,
          type: undefined,
          verified: undefined,
          secret: undefined,
          token: undefined,
          aesKey: undefined
        };
        this.resetForm("form");
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.handle= "add";
        this.title = "添加公众号账号";
      },
      /** 修改按钮操作 */
      handleUpdate(row, ids) {
        this.reset();
        const appid = row.appid || ids;
        getAccount(appid).then(response => {
          this.form = response.data;
          this.form.type = response.data.type+'';
          this.open = true;
          this.handle= "update";
          this.title = "修改公众号账号";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.appid != null && this.handle == "update") {
              updateAccount(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.$emit('refreshDataList');
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addAccount(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.$emit('refreshDataList')
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
